Server Components

serverのみでrenderingされるcomponents

renderした結果のJSXのみをclientに返す

React Flightの形式でclientに返す

hydrationされない

bundle sizeに影響を与えない

通信量も小さくなるし、clientでparseする時間なども小さくなる

方針としては、

基本的にはserver componentsを使い、無理な箇所だけclient componentsを使う、という風にする

server componentsの方が効率が良いが、制限も大きい

特徴

stateを持たない

useState, useReducer, useContextなどは使えない

Contextを使うための<Provider/>なんかもserver componentsには置けない ref

2度目以降の再renderingはない

useEffect. useLayoutEffectは使えない

renderした結果のJSX(HTMLではない)のみclientに返す

JSXをJSON化したものをclientに送る

e.g. J0:["$","div",null,{"className":"main","children":[["$","section"...

再renderingはできないので、必要な場合は再度serverにreqを送る

ここもSSGとかと異なる点

brwoser上のAPIは使えない

Server Componentsから、Client Componentsに渡すpropsはserialize可能なもののみ

従って、関数やDate objectは渡せない

嬉しさ

clientに送るJSのサイズが減る

例えば、date-fnsで日付を表示する際に、server上で行った計算結果を返せば良い

clientのコードにdate-fnsのコードは含まれない

server上で完結できるなら、libraryのbundle sizeを気にせず使用できる

データアクセスの速度短縮

client → server → DBだったのが、server → DBで済むということ

これはSSRとかやってたときと同じmrsekut.icon

わざわざAPI エンドポイントを作らなくて良くなった

が、これはServer Actionsを使えばclient componentでも享受できるので、もはやserver components固有の嬉しさではなくなったmrsekut.icon